---
id: splitter
title: Splitter
description: A component that divides your interface into resizable sections
status: Preview
---

<ComponentPreview id="Splitter" />

## Anatomy

To set up the splitter correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="splitter" />

## Examples

Learn how to use the `Splitter` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Using Render Props

The Splitter component allows you to pass a function as a child to gain direct access to its API. This provides more
control and allows you to modify the size of the panels programmatically:

<Example id="render-prop" />

### Handling Events

Splitter also provides `onResizeStart`, `onResize`, and `onResizeEnd` events which can be useful to perform some actions
during the start and end of the resizing process:

<Example id="events" />

### Vertical Splitter

By default, the Splitter component is horizontal. If you need a vertical splitter, use the `orientation` prop:

<Example id="vertical" />

### Collapsible Panels

To make a panel collapsible, set the `collapsible` prop to `true` on the panel you want to make collapsible.
Additionally, you can use the `collapsedSize` prop to set the size of the panel when it's collapsed.

> This can be useful for building sidebar layouts.

<Example id="collapsible" />

### Multiple Panels

Here's an example of how to use the `Splitter` component with multiple panels.

<Example id="multiple-panels" />

### Using the Root Provider

The `RootProvider` component provides a context for the splitter. It accepts the value of the `useSplitter` hook. You
can leverage it to access the component state and methods from outside the splitter.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

<ComponentTypes id="splitter" />

### Context

These are the properties available when using `Splitter.Context`, `useSplitterContext` hook or `useSplitter` hook.

<ContextType id="splitter" />

## Accessibility

Complies with the [Window Splitter WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
